<template>
  <div>
    <van-nav-bar title="黑马商城" left-text="返回" left-arrow border class="topNav" @click-left="goback" />
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <div v-if="cartList.length">
        <div v-for="(item, index) in cartList" :key="index">
          <van-swipe-cell :name="item.id" :stop-propagation="true" @close="closeCell">
            <template slot="left">
              <van-button square type="danger" text="删除" size="small" style="margin-top:40px;"/>
            </template>
            <van-card
              :num="item.cou"
              :title="item.title"
              :thumb="item.thumb_path"
              :price="item.sell_price * item.cou"
            />
            <van-stepper v-model="item.cou" />
          </van-swipe-cell>
        </div>
      </div>
      <div v-if="!cartList.length">
        <van-row>
          <van-col span="10" offset="7">
            <img src="http://demo.dtcms.net/upload/201504/20/thumb_201504200059017695.jpg" alt />
            <div>购物车空空如也</div>
            <van-button type="info" size="mini" @click="goGoosList">去逛逛</van-button>
          </van-col>
        </van-row>
      </div>
    </van-pull-refresh>
    <van-submit-bar :price="total*100" square :loading="status" button-text="提交订单" @submit="submit"/>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
  data () {
    return {
      isLoading: false,
      status: false
    }
  },
  created () {
    this.getCartList()
  },
  methods: {
    ...mapMutations(['setCartList', 'clearCart']),
    async getCartList () {
      this.isLoading = false
    },
    goback () {
      this.$router.push('/homepage')
    },
    goGoosList () {
      this.$router.push('/goods')
    },
    onRefresh () {
      this.getCartList()
    },
    closeCell (info) {
      this.removeCartList(info)
    },
    removeCartList (info) {
      if (info.position === 'left') {
        let index = this.cartList.findIndex(item => item.id === info.name)
        this.cartList.splice(index, 1)
        this.arr.splice(index, 1)
      }
    },
    submit () {
      this.status = true
      setTimeout(() => {
        this.$router.push('homepage')
        this.status = false
      }, 500)
    }
  },
  computed: {
    ...mapState(['cartList', 'arr']),
    total () {
      let sum = 0
      this.cartList.forEach(item => {
        sum += item.sell_price * item.cou
      })
      return sum
    }
  }
}
</script>

<style scoped lang="less">
.van-nav-bar {
  background-color: #1989fa;

  .van-nav-bar__left {
    .van-icon {
      color: #fff !important;
    }
    .van-nav-bar__text {
      color: #fff;
    }
  }
  .van-nav-bar__title {
    color: #fff;
  }
}
.van-card {
  width: 370px;
}
.van-card__content {
  display: block;
  .van-card__price {
    color: #f44;
    font-weight: 700;
  }
}
.van-stepper {
  display: flex;
  justify-content: flex-end;
}
.van-button {
  border-radius: 0;
}
.van-stepper {
  padding: 0 15px;
}
.van-submit-bar__bar {
  padding: 0;
}
.van-col {
  display: flex;
  height: 200px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding: 10px;

  img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
  }
}
.van-pull-refresh {
  min-height: 600px;
}
.van-swipe-cell {
  display: flex;
  align-items: center;
}
div.van-swipe-cell__wrapper {
  width: 100% !important;

  div.van-swipe-cell__left {
  display: flex !important;
  align-items: center !important;
}
}

</style>
